<template>
    <div class="Student-Lesson-Share">
        <div class="Student-Lessong-Share-img1">
            <img src="https://oss.xiaoniaoai.com/beijing123.png" alt="">
            <img src="https://oss.xiaoniaoai.com/huojian101.png" alt="">
            <img src="https://oss.xiaoniaoai.com/juxing101.png" alt="">
             <img :src= "items" alt="" v-for="(items,index) of msgss.photos.split(',')" v-if=" index <1 " :key="index">
        </div>
        <div class="Student-Lesson-Share-content">
          <h5>{{ msgss.course_name}}</h5>
          <p><span style="margin-right:.3rem">星级评价: </span> <span v-for="(items,index) in msgss.score" :key="index" class="stars" >
                            <img src="https://oss.xiaoniaoai.com/grade-star.png" alt=""  style="width：.2rem;height:.2rem">
            </span></p> 
          <ul>
            <li>
                <span>课程内容</span>
                <p>{{msgss.goal}}</p>
            </li>
            <li>
                <span>教师评价</span>
                <p>{{msgss.comment}}</p>
            </li>
            <li>
                <span>学生风采</span>
                <div><img :src= "items+'!249cartch'" alt="" v-for="(items,index) of msgss.photos.split(',')" v-if=" index <1 " :key="index"></div>
            </li>
            <div class="fenge">
            <img src="https://oss.xiaoniaoai.com/fenge@2x.png" alt="">
            <qrcode />
        </div>
          </ul>
          
        </div>
       <div class="Student-footer">
            <p>
            <a href="http://xiaoniaoweixiao.com" style="color:#cecece">小鸟微校提供支持</a>
            </p>
            <span style="color:#cecece">xiaoniaoweixiao.com</span>
      </div>
    </div>
</template>

<script>
import qrcode from '@/pages/qrcode'
import axios from 'axios'

export default {
    name:'LessonShare',
    data () {
        return  {
            info:'',
            rate:'',
            infos:'',
            id:localStorage.getItem('user_id'),
            e:'',
            uid: localStorage.getItem('user_uid'),
            dataid:'',
            msg:'',
            chisrc:'',
            msgss:''
        }
    },
    components:{
     qrcode
    },
    methods:{
        	    
    },
    created () {
    var numbers = this.$route.query.e
    this.e = this.$route.query.e
   
         axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_list',{
        id:this.id
        }).then((val) => {
          console.log(val);
           this.records=val.data.data.data.length 
          if(val.data.data.data.length == '0'){
             Toast({
              message: '您目前还没有档案',
              position: 'middle',
              duration: 1000
            })
        }
          this.msgss = val.data.data.data[0];
          console.log(this.msgss)
          
        }).catch((err) => {
          console.log(err);
        })
   },
    mounted(){
       this.WXConfig.wxShowMenu(); 
         var x = 0;//用于记录clientX
         var y = 0;//用于记录clientY
         var  z = 0;//用于判断，是否是已按住并超过了设定时间。
      var timer1 = null;//用于定时器
      let oDiv = document.getElementById('qrcode');
      // 因为长按事件要加在div#canvas上的，如果事件是任何地方的话，就是document
 
      /* 添加touchstart，手指触摸事件 */
      oDiv.addEventListener("touchstart", function(e) {
          /* 阻止默认事件，其实这里ie的兼容写法returnValue没必要*/
          if (e.preventDefault) e.preventDefault();
          else e.returnValue = false;
          /* 移动时触发touchmove导致多个touches对象，所以可以直接跳出*/
          if (e.touches.length > 1) {
            return false;
          }
          /* 这里有历史渊源的，是第二次点击的时候，把z的值还原。*/
          z = 0;
          /* 手指一旦触摸屏幕，就开启一个倒计时定时器timer1 */
          timer1 = setTimeout(function() {
            z = 1; // 如果倒计时结束还没有清楚定时器的话，就把z赋值为1，这样，当判断z=1就说明按住屏幕的时间达到了开发者设定的长按时间。也就是满足了长按事件
          }, 500);
          /* 手指一旦触摸屏幕，要立即做的第二件事：记录触摸时的点的位置，并存在x，y两个变量里*/
          x = e.touches[0].clientX;
          y = e.touches[0].clientY;
      }, false);
 
      /* 绑定第二个事件touchmove，手指在屏幕上连续滑动时连续地触发*/
      oDiv.addEventListener("touchmove", function(e) {
          if (e.preventDefault) e.preventDefault();
          else e.returnValue = false;
          /*判断，因为每次手指移动会连续触发touchmove，也就会不停的往event事件对象里边添加“跟踪触摸属性touches”*/
          //这个属性是一个数组，每次新添加的都会在最前边。所以每次获取数组里边的第一个对象对应的clientX和clientY，就是实时的移动点的位置
          //找这个点的作用，就是为了监听用户，是否按住还移动了。如果移动了，那不能算长按事件（不过这个也看产品需求，如果按住也要触发长按规定那个逻辑的话，这不要判断）
          if (x != e.touches[0].clientX || y != e.touches[0].clientY) {
            // 具体的判断方法，还记得touchstar那里已经记录了'起跑点'了，只要和x，y的值进行比较，与两个的值有任意一个不等，就是移动了。
            // 那么移动的话，先要清除事先埋伏的定时器timer1.要不然，虽然不是长按事件但是倒计时还在进行中。
            clearTimeout(timer1);
            return false;//除掉'后患'后，安心的结束本次用户的触摸事件监听。
          }
      }, false);
 
      /* 添加第三个触摸事件touchend，这个事件的场景就是用户手指从屏幕拿开时触发*/
      oDiv.addEventListener("touchend", function(e) {
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        /* 上文已经介绍，当用户拿开的时候，只要判断用户从点击到拿开的时间。而记录时间长度比较麻烦，所以当时用了定时器，设定了一个我们想要的时间，时间到了就改变一个状态值z，所以这里我们只要判断z是否被改变即可*/
        if (z != 1) {
          /* 如果用户手指头拿开的时候，z还是0，即不等于1，说明定时器还没被触发，也就说明没有达到长按的时间，那么不用期待了，同touchmove寿终正寝时要做的一样，清除定时器即可。*/
          clearTimeout(timer1);
          /* 但是，touchend和touchmove还有一点不一样的，touchend是end（废话），touchmove不管move多少次，最终手指总要从屏幕拿开的，这就是他的关键点。而拿开就是结束，结束，是整个这次触摸生命过程的结束。*/
          /* 所以，end还要做的事是初始化，是还原。他需要把x，y的值归为原始。以为了下次再次触发touchstart时做准备。好感人的故事。*/
          x = 0;
          y = 0;
          return false;//然后安心的“死去”。
        } else if(z=1){
          /* 如果，触发了长按事件，终于触发了长按事件！*/
          /* 他还是不能得意忘形，在大展宏图之前，还是要做点准备，打扫一下战场，将各个变量初始化 */
          x = 0;
          y = 0;
          z = 0;
         this.$router.go(-1)
        }
      }, false);
   },
}
</script>

<style scoped>
*{
    font-size: .24rem;
font-family:'PingFang-SC-Regular';
font-weight:400;
color:rgba(78,78,78,1);
}
.student-Lesson-Share{
    width: 100%;
    height: 100%;
}
.Student-Lessong-Share-img1 > img:nth-child(1) {
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.Student-Lessong-Share-img1 > img:nth-child(2) {
    position: absolute;
    top:-0.46rem;
    left:-2rem;
    width: 4.38rem;
    height: 5.41rem;
    z-index: -1;
}
.Student-Lessong-Share-img1 > img:nth-child(3){
    position: absolute;
    top:9%;
    left:10%;
    width: 5.98rem;
}
.Student-Lessong-Share-img1 > img:nth-child(4){
    position: absolute;
    top:3%;
    left:4%;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    z-index: -1;
}
.Student-Lesson-Share-content{
    position: absolute;
    top:8%;
    left:10%;
    width: 5.98rem;
    height: 85%;
    padding-top: .3rem;
    
}
.Student-Lesson-Share-content > h5{
  font-size: .3rem;
  width: 40%;
  margin-left:30%;
  text-align: center;
  font-family:'PingFang-SC-Regular';
  font-weight:400;
  color:rgba(0,0,0,1);
}
.Student-Lesson-Share-content > p{
     position: relative;
     left: 6%;
     top: 2%;
}
ul{
    position: relative;
    left: 6%;
    width: 88%;
    height: 60%;
    list-style:none;
    padding-top: .3rem;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
   
}
ul > li > p{
    width: 3.82rem;
    margin-left:25%;
    font-size:.2rem;
    text-indent: .4rem
}
ul > li > p , span {
 float: left;
}
ul > li:nth-child(3) > div{
    margin-left: 25%;
}
ul > li:nth-child(3) > div > img {
    width: 3.82rem;
    height: 2.18rem;
}
.fenge{
    position: absolute;
    bottom:5%;
    left: 0;
    height: 0.03rem;
}
.fenge > img {
    width:100%;
    height: 100%;
}
.Student-footer{
  width: 80%;
  height:8%;
  margin-left: 10%;
  position: absolute;
  bottom: 0;
}
.Student-footer > p{
  text-align: center;
  margin-top:.4rem;
}
.Student-footer > span {
  display: block;
  text-align: center;
  color: #00afc7;
  width: 100%;
}
</style>

